<template>
  <vxe-table
    ref="table"
    class="ui-grid-table"
    :class="{'is-border': border}"
    round
    show-header-overflow="tooltip"
    :height="tableHeight"
    :maxHeight="maxHeight"
    :row-config="rowConfig"
    :column-config="columnConfig"
    :radio-config="radioConfig"
    :checkbox-config="checkboxConfig"
    :sort-config="sortConfig"
    :seq-config="seqConfig"
    :data="data"
    :show-overflow="showOverflow"
    :border="border ? 'full' : 'inner'"
    :scroll-y="scrollYConfig"
    :scroll-x="scrollXConfig"
    :tree-config="treeConfig"
    @checkbox-change="handleSelectionChange"
    @checkbox-all="handleSelectionAllChange"
    @radio-change="handleRadioChange"
    @cell-mouseenter="handleCellMouseEnter"
    @cell-mouseleave="handleCellMouseLeave"
  >
    <template v-if="selectable && showIndex">
      <vxe-column v-if="multiple" type="checkbox" width="60" fixed="left" align="center">
        <template slot="checkbox" slot-scope="scope">
          <vex-checkbox
            v-if="hoverRowId === scope.rowid || handleRowCheckboxValue(scope.row, scope.column)"
            :value="handleRowCheckboxValue(scope.row, scope.column)"
            @input="handleRowCheckboxInput(scope.row, scope.column, $event)"
            @click.native.stop
            :style="{'width': '18px'}"
          >
          </vex-checkbox>
          <span v-else>
            {{showPagination ? ((pageIndex - 1) * pageSize + scope.$rowIndex + 1) : scope.$rowIndex + 1}}
          </span>
        </template>
      </vxe-column>
      <vxe-column v-else type="radio" width="60" fixed="left" align="center">
        <template slot="radio" slot-scope="scope">
          <vex-radio
            v-if="hoverRowId === scope.rowid || handleRowRadioValue(scope.row, scope.column)"
            :value="handleRowRadioValue(scope.row, scope.column)"
            :label="true"
            @input="handleRowRadioInput(scope.row, scope.column)"
            :style="{'width': '18px'}"
          >
          </vex-radio>
          <span v-else>
            {{showPagination ? ((pageIndex - 1) * pageSize + scope.$rowIndex + 1) : scope.$rowIndex + 1}}
          </span>
        </template>
      </vxe-column>
    </template>
    <template v-else>
      <template v-if="selectable">
        <vxe-column v-if="multiple" type="checkbox" width="60" fixed="left" align="center"></vxe-column>
        <vxe-column v-else type="radio" width="60" fixed="left" align="center"></vxe-column>
      </template>
      <vxe-column v-if="showIndex" type="seq" width="60" fixed="left" align="center"></vxe-column>
    </template>
    <slot></slot>
  </vxe-table>
</template>
<script>
import { Table, Column, Checkbox, Radio } from 'vxe-table'
import 'vxe-table/lib/style.css'
import GridColumn from './grid-column'

export default {
  name: 'UiGridTable',
  components: {
    VxeTable: Table,
    VxeColumn: Column,
    VexCheckbox: Checkbox,
    VexRadio: Radio,
    GridColumn
  },
  props: {
    data: {
      type: Array
    },
    idField: {
      type: String
    },
    parentField: {
      type: String
    },
    border: {
      type: Boolean,
      default: false
    },
    selectable: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: true
    },
    showIndex: {
      type: Boolean,
      default: false
    },
    showPagination: {
      type: Boolean,
      default: false
    },
    pageIndex: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 20
    },
    height: {
      type: String
    },
    rowHeight: {
      type: String,
      default: '48px'
    },
    maxHeight: {
      type: String
    }
  },
  data () {
    return {
      hoverRowId: null
    }
  },
  computed: {
    showOverflow () {
      if (!this.rowHeight || this.rowHeight === 'auto') {
        return 
      }
      return 'ellipsis'
    },
    tableHeight () {
      let height
      if (this.maxHeight) {
        height = ''
      } else {
        if (this.height && this.height !== 'auto') {
          height = '100%' // vxetable如果设置auto表示自动根据父级元素高度计算
        }
      }
      return height
    },
    sortConfig () {
      return {
        trigger: 'cell'
      }
    },
    seqConfig () {
      return {
        seqMethod: ({ seq }) => {
          return this.showPagination ? ((this.pageIndex - 1) * this.pageSize + seq) : seq
        }
      }
    },
    scrollYConfig () {
      return {
        gt: 20
      }
    },
    scrollXConfig () {
      return {
        // gt: 10
      }
    },
    rowConfig () {
      return {
        keyField: this.idField,
        isHover: true,
        height: this.rowHeight,
        isCurrent: this.selectable && this.multiple === false
      }
    },
    treeConfig () {
      if (!this.parentField) {
        return 
      }
      return {
        transform: true, 
        rowField: this.idField, 
        parentField: this.parentField
      }
    },
    columnConfig () {
      return {
        resizable: true
      }
    },
    radioConfig () {
      return {
        trigger: 'row'
      }
    },
    checkboxConfig () {
      return {
        trigger: 'row'
      }
    }
  },
  mounted () {
    const me = this
    const loadTableData = this.$refs.table.loadTableData
    this.$refs.table.loadTableData = function (...args) {
      return loadTableData.apply(this, args).then(() => {
        me.$emit('loaded')
      })
    }
  },
  methods: {
    handleRowCheckboxValue (row, column) {
      if (!this.$refs.table) {
        return false
      }
      return this.$refs.table.isCheckedByCheckboxRow(row)
    },
    handleRowRadioValue (row, column) {
      if (!this.$refs.table) {
        return false
      }
      return this.$refs.table.isCheckedByRadioRow(row)
    },
    handleRowCheckboxInput (row) {
      if (!this.$refs.table) {
        return
      }
      this.$refs.table.toggleCheckboxRow(row)
      this.$nextTick(() => {
        this.$emit('selection-change', {
          selection: this.$refs.table.getCheckboxRecords()
        })
      })
    },
    handleRowRadioInput (row) {
      if (!this.$refs.table) {
        return
      }
      this.$refs.table.setRadioRow(row)
    },
    handleCellMouseEnter (evt) {
      this.hoverRowId = evt.rowid
      clearTimeout(this._mouseLeaveTimer)
    },
    handleCellMouseLeave () {
      clearTimeout(this._mouseLeaveTimer)
      this._mouseLeaveTimer = setTimeout(() => {
        if (!this.$refs.table.hoverRow) {
          this.hoverRowId = null
        }
      })
    },
    handleSelectionChange (evt) {
      if (!this.selectable) {
        return
      }
      if (!this.multiple) {
        return
      }
      this.$emit('selection-change', {
        selection: evt.records
      })
    },
    handleSelectionAllChange (evt) {
      this.$emit('selection-change', {
        selection: evt.records
      })
    },
    handleRadioChange (evt) {
      if (!this.selectable) {
        return
      }
      if (this.multiple) {
        return
      }
      this.$emit('select-change', {
        row: evt.row
      })
    },
    clearSelection () {
      this.$refs.table && this.$refs.table.clearCheckboxRow()
    },
    setCheckboxRow (rows) {
      this.$refs.table && this.$refs.table.setCheckboxRow(rows, true)
    },
    setRadioRow (row) {
      this.$refs.table && this.$refs.table.setRadioRow(row)
    }
  },
  beforeDestroy () {
    clearTimeout(this._mouseLeaveTimer)
  }
}
</script>
<style lang="less">
.ui-grid-table {
  [class*=vxe-] {
    font-feature-settings: normal;
    font-variant: normal;
  }
  &:not(.is-border) {
    .vxe-resizable{
      &:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -1px;
        margin-top: -9px;
        width: 1px;
        height: 18px;
        background-color: rgba(0,0,0,.08);
      }
    }
    .vxe-header--column.col--last{
      .vxe-resizable{
        &:after {
          opacity: 0;
        }
      }
    }
  }
  .vxe-table--header{
    .vxe-cell{
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .vxe-cell--title{
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .vxe-cell--sort{
    transform: scale(0.8);
  }
  &.vxe-table .vxe-sort--asc-btn{
    top: -1px;
  }
  &.vxe-table .vxe-sort--desc-btn{
    bottom: -2px;
  }
  .vxe-table--render-default .vxe-table--empty-content{
    pointer-events: none;
  }
}
</style>
